<template>
	<view>
		<forum :screenHeight="screenHeight" v-if="current == 0"></forum>
		<team v-if="current == 1"></team>
		<square v-else-if="current == 2"></square>
		<message v-else-if="current == 3"></message>
		<aboutMe v-else-if="current == 4" :scrollTop="scrollTop"></aboutMe>
		
		<u-tabbar
			:value="current"
			
			:placeholder="false"
			:fixed="true"
			:safeAreaInsetBottom="false"
		>
			<u-tabbar-item text="论坛" @click="toForum">
				<u-icon slot="inactive-icon" name="home" size="40"></u-icon>
				<u-icon slot="active-icon" name="home" size="40" color="#189bff"></u-icon>
			</u-tabbar-item>
			<u-tabbar-item text="活动/组队"  @click="toTeam">
				<u-icon slot="inactive-icon" name="man-add" size="40"></u-icon>
				<u-icon slot="active-icon" name="man-add" size="40" color="#189bff"></u-icon>
			</u-tabbar-item>
			<u-tabbar-item text="广场" @click="toSquare">
				<image slot="active-icon" v-show="current == 2" :src="icon.squareCopy" mode="aspectFit" style="width: 40upx; height: 36upx;"></image>
				<image slot="inactive-icon" v-show="current != 2" :src="icon.square" mode="aspectFit" style="width: 40upx; height: 36upx;"></image>
			</u-tabbar-item>
			<u-tabbar-item text="消息" dot @click="toMessage">
				<u-icon slot="inactive-icon" name="email" size="40"></u-icon>
				<u-icon slot="active-icon" name="email" size="40" color="#189bff"></u-icon>
			</u-tabbar-item>
			<u-tabbar-item text="我的" @click="toMe">
				<u-icon slot="inactive-icon" name="account" size="40"></u-icon>
				<u-icon slot="active-icon" name="account" size="40" color="#189bff"></u-icon>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				icon: {
					square: '/static/image/square.png',
					squareCopy: '/static/image/square-copy.png'
				},
				current: 4,
				screenHeight: undefined,
				scrollTop: 0,
			}
		},
		methods:{
			toSquare(){
				this.current = 2
			},
			toForum(){
				this.current = 0
			},
			toTeam(){
				this.current = 1
			},
			toMessage(){
				this.current = 3
			},
			toMe(){
				this.current = 4
			},
			
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.screenHeight = res.screenHeight
				}
			})
		}
	}
</script>

<style scoped>
	
</style>